<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
    />
    <!-- 公共样式 -->
    <link rel="stylesheet" href="../../../../assets/common/common.css" />
    <!-- 字体图标 -->
    <link rel="stylesheet" href="../../../../assets/iconfont/iconfont.css" />
    <link rel="stylesheet" href="./clockInCalendar.css" />
    <title>打卡月历</title>
  </head>
  <body>
    <div class="clockInCalendar-index">
      <!-- 头部 -->
      <div class="header bg-fff flex jc-sb aic">
        <div class="l">
          <i onclick="fanhui()" class="iconfont icon-zuojiantou"></i>
        </div>
        <div class="c tac">打卡月历</div>
        <div onclick="yuedu()" class="r">月度统计</div>
      </div>
      <!-- 日历 -->
      <div class="calendar bg-fff">
        <div class="t">
          <div class="date">
            <i class="iconfont icon-xiangzuojiantou"></i>
            <span>2020年1月</span>
            <i class="iconfont icon-jiantou"></i>
          </div>
        </div>
        <div class="c">
          <div class="week flex aic jc-sb">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
          </div>
        </div>
        <div class="b">
          <div id="day-box" class="day-box flex fww">
            <div class="day fdc aic jc-sb">
              <span class="num">1</span>
              <span class="dian"></span>
            </div>
          </div>
        </div>
      </div>
      <!-- 主要 -->
      <div class="main">
        <!-- 每一次打卡 -->
        <div class="list">
          <div class="item-tb">
            <div class="text-boxt">
              <i class="iconfont icon-yuanquan"></i>
              <span>上班打卡</span>
              <span>9:00</span>
              <span class="dao">迟到</span>
            </div>
            <div class="text-boxb flex">
              <img src="./img/u3805.png" alt="" />
              <div class="text">
                <p class="p1">
                  <span>打卡时间</span>
                  <span>09:01:01</span>
                </p>
                <p class="p2">
                  <span>打卡地点:</span>
                  <span>北京市朝阳区朝阳公园南路1号</span>
                </p>
              </div>
            </div>
          </div>
          <div class="item-tb">
            <div class="text-boxt">
              <i class="iconfont icon-yuanquan"></i>
              <span>下班打卡</span>
              <span>18:00</span>
            </div>
            <div class="text-boxb flex">
              <img src="" alt="" />
              <div class="text">
                <p class="p1">
                  <span>打卡时间</span>
                  <span>18:01:01</span>
                </p>
                <p class="p2">
                  <span>打卡地点:</span>
                  <span>北京市朝阳区朝阳公园南路1号</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./clockInCalendar.js"></script>
  </body>
</html>
